<template>
  <el-card class="mt-10">
    <el-form>
      <el-form-item label="属性名" style="width: 300px">
        <el-input placeholder="请输入属性名" v-model="attr.attrName" />
      </el-form-item>
      <el-form-item style="width: 300px">
        <el-button
          type="primary"
          :disabled="!attr.attrName"
          @click="addAttrName"
          >添加属性值</el-button
        >
        <el-button @click="cancelAddOrUpdateAttr">取消</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="attr.attrValueList" style="width: 100%">
      <el-table-column type="index" label="序号" width="80" />
      <el-table-column label="属性值名称" width="180">
        <template v-slot="{ row, $index }">
          <el-input
            v-model="row.valueName"
            v-if="row.isShowInput"
            ref="inputRef"
            @blur="showTest(row, $index)"
          />
          <div v-else @click="showInput(row)">
            {{ row.valueName }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="address" label="操作">
        <template v-slot="{ row, $index }">
          <el-popconfirm
            :title="`确定要删除${row.valueName}吗?`"
            @confirm="delValueName($index)"
          >
            <template #reference>
              <el-button
                type="danger"
                :icon="Delete"
                size="small"
                title="删除"
              />
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      type="primary"
      :disabled="!showSaveBtn"
      class="mt-20"
      @click="submit"
    >
      保存
    </el-button>
    <el-button class="mt-20" @click="cancelAddOrUpdateAttr">取消</el-button>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "AddOrUpdateAttr",
};
</script>

<script lang="ts" setup>
import { Delete } from "@element-plus/icons-vue";
import { ref, reactive, nextTick, computed } from "vue";
import { ElMessage } from "element-plus";
import { useCategoryStore } from "@/stores/category";
import { addOrUpdateAttrApi } from "@/api/product/attr";
import { AttrItem, AttrValueItem } from "@/api/product/type/attrType";
import { useAttrStore } from "@/stores/attr";
// import { AttrItem } from "@/api/product/type/attrType";
// const isShowSaveBtn = ref(true);
const categoryStore = useCategoryStore();
const attrStore = useAttrStore();
const inputRef = ref();
const attr = reactive<AttrItem>({
  attrName: attrStore.attr.attrName,
  attrValueList: attrStore.attr.attrValueList,
  categoryId: categoryStore.category3Id as number,
  categoryLevel: 3,
});

const emit = defineEmits(["setIsShow"]);
// 取消添加或修改属性
const cancelAddOrUpdateAttr = () => {
  emit("setIsShow", true);
};
// 添加属性值
const addAttrName = () => {
  attr.attrValueList.push({
    isShowInput: true,
    valueName: "",
  });
  nextTick(() => {
    inputRef.value.focus();
  });
};
const showInput = (row: AttrValueItem) => {
  row.isShowInput = true;
  nextTick(() => {
    inputRef.value.focus();
  });
};
// 失去焦点
const showTest = (row: AttrValueItem, index: number) => {
  if (!row.valueName) {
    attr.attrValueList.splice(index, 1);
    return;
  }
  const flag2 = attr.attrValueList.some((attrValue) => {
    // 排除掉已存在的相同值
    if (attrValue === row) return false;
    if (attrValue.valueName === row.valueName) return true;
    return false;
  });

  if (flag2) {
    ElMessage.warning("不能输入相同的属性值");
    return;
  }
  row.isShowInput = false;
};
// 删除
const delValueName = (index: number) => {
  attr.attrValueList.splice(index, 1);
};
// 保存按钮是否禁用
const showSaveBtn = computed(() => {
  return attr.attrValueList.some((attrValue) => {
    return attrValue.valueName;
  });
});
// 提交增加的属性值
const submit = async () => {
  await addOrUpdateAttrApi(attr);
  cancelAddOrUpdateAttr();
};
</script>

<style scoped></style>
